@import 'config';
.package-warp{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  .mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    opacity: 1;
    backdrop-filter: blur(px2rem(5px));
    background: rgba($black, .5);
    &.fade-enter, &.fade-leave-active{
      opacity: 0;
      background: rgba($black, 0);
    }
  }
  .btn-reserve{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: px2rem(44px);
    line-height: px2rem(44px);
    font-size: px2rem(16px);
    text-align: center;
    color: $white;
    background-color: $red;
  }
  .btn-gray{
    color: $dark;
    background-color: $gray;
  }
}
.package{
  position: absolute;
  left:  px2rem(10px);
  right: px2rem(10px);
  bottom: px2rem(54px);
  z-index: 999;
  background-color: $white;
  border-radius: px2rem(10px); 
  .bd,.ft{
    padding: px2rem(10px);
  }
  .ft{
    font-size: px2rem(14px);
    border-top: px2rem(1px) solid $light;
    color: $dark;
    vertical-align: middle;
    span{
      padding: 0 px2rem(3px);
    }
    .totalCount{

    }
    .totalPrice{
      font-size: px2rem(20px);
      color: $primary;
    }
  }
  .thumb{
    width: px2rem(48px);
    height: px2rem(48px);
    border: px2rem(1px) solid darken($light, 5%);
    img{
      width: 100%;
      height: 100%;
    }

  }
  .title{
    font-size: px2rem(14px);
    margin:  px2rem(8px) 0;
    color: $dark;
  }
  .cartcontrol-warp{
    // padding-bottom: px2rem(14px);
  }
  .gift{
    .item{
      display: inline-block;
      height: px2rem(16px);
      font-size: px2rem(12px);
      line-height: px2rem(16px);
      padding: px2rem(4px) px2rem(10px);
      border: 1px solid $gray;
      margin: px2rem(4px) px2rem(4px) px2rem(4px) 0;
      border-radius: px2rem(13px);
      &.active {
        color: $white;
        background-color: $primary;
        border-color: $primary;
      }
    }
  }
  
}